<template>
	<view class="chat-page">
		<view class="message-wrap">
			<scroll-view scroll-y enable-flex class="scroll-list" @scrolltolower="loadHistory" :scroll-top="scrollTop">
				<view class="message-item-wrap">
					<view v-for="(item, index) in messageList" :key="item.id" @click="onClick(index)">
						<MessageItem :detail="item"></MessageItem>
					</view>
				</view>
				<view class="loading-wrap" :style="{ display: loadingStatus?'':'none' }">
					<uni-load-more :iconSize="18" :status="loadingStatus" />
				</view>
			</scroll-view>
		</view>
		<!-- 键盘弹起占位 -->
		<view :style="{height: inputBottomValue}"></view>
	</view>
	<!-- 消息输入 -->
	<view class="input-wrap" :style="{ bottom: inputBottomValue}">
		<input id="robotInput" class="input" v-model="inputValue" placeholder="请输入" :adjust-position="false" type="text"
			@confirm="sendMessage" />
		<view class="send-btn" @tap="sendMessage">
			<!-- <image src="@/static/enter_n.png" mode=""></image> -->
			<view class="fontSize-28">发送</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		nextTick
	} from 'vue';
	import {
		onHide,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import MessageItem from './components/messageItem.vue';
	import {userChatLog,sendUserChat,sendShopChat,shopChatLog} from '@/utils/api'
	onLoad((p)=>{
		type.value = p.type
		if(p.type==1){
			getMessageList(8)
		}else{
			getMessageListx(8)
		}
	})
	const type = ref(1)
	const inputValue = ref('');
	const scrollTop = ref();
	// 发送消息
	const sendMessage = () => {
		if ((inputValue.value ?? '') === '') return
		const timestamp = new Date().getTime();
		let newMessage = {
			id: messageList.value.length + 1,
			content: inputValue.value,
			type:2
		}
		if(type.value==1){
			sendUserChat({content:inputValue.value,create_time_text:timestamp}).then(res=>{
				if(res.code==1){
					messageList.value.push(newMessage)
					inputValue.value = '';
					// 滚动到底部
					scrollTop.value = 0;
					nextTick(() => {
						scrollTop.value = undefined;
					})
				}
			})
		}else{
			sendShopChat({content:inputValue.value,create_time_text:timestamp}).then(res=>{
				if(res.code==1){
					messageList.value.push(newMessage)
					inputValue.value = '';
					// 滚动到底部
					scrollTop.value = 0;
					nextTick(() => {
						scrollTop.value = undefined;
					})
				}
			})
		}
		
		
	}
	const page = ref(1)
	const messageList = ref([]); //消息列表
	const getMessageList = (num = 10) => {
		userChatLog({page:page.value,limit:20}).then(res=>{
			if(res.code==1){
				const random = Math.random();
				const messageData = new Array(res.data.log.data.length).fill(0).map((v, i) => {
					const id = messageList.value.length + i
					res.data.log.data[i].id = id
					return res.data.log.data[i]
				})
				messageList.value.unshift(...messageData)
				
			}
		})
	}
	const getMessageListx = (num = 10) => {
		shopChatLog({page:page.value,limit:20}).then(res=>{
			if(res.code==1){
				const random = Math.random();
				const messageData = new Array(res.data.log.data.length).fill(0).map((v, i) => {
					const id = messageList.value.length + i
					res.data.log.data[i].id = id
					return res.data.log.data[i]
				})
				messageList.value.unshift(...messageData)
				
			}
		})
	}

	const loadingStatus = ref(); //'more' | 'loading' | 'no-more'
	const loadHistory = (e) => {
		if (loadingStatus.value && loadingStatus.value !== 'more') return
		loadingStatus.value = 'loading';
		setTimeout(() => {
			page.value++
			if(type.value==1){
				getMessageList()
			}else{
				getMessageListx()
			}
				
			loadingStatus.value = 'more';
		}, 1000)
	}

	const inputBottomValue = ref('0'); //输入框距离底部距离
	// 监听键盘高度变化
	const keyboardChange = (res) => {
		// res.height 为键盘高度
		if (res.height) { //展开
			inputBottomValue.value = res.height + 'px'
		} else { //收起
			inputBottomValue.value = '0';
		}
	}
	onHide(() => {
		uni.offKeyboardHeightChange(keyboardChange);
	})
	onShow(() => {
		uni.onKeyboardHeightChange(keyboardChange);
	})
</script>

<style lang="scss" scoped>
	.chat-page {
		height: calc(100vh - 120rpx);
		display: flex;
		flex-direction: column;
		background-color: #f6f6f6;

		.message-wrap {
			height: 0;
			flex: 1;

			.scroll-list {
				height: 100%;
				transform: scaleY(-1);
			}

			.message-item-wrap {
				min-height: 100%;
				transform: scaleY(-1);
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
			}

			.loading-wrap {
				transform: scaleY(-1);
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx;
			}
		}
	}

	.input-wrap {
		background-color: #ffffff;
		height: 120rpx;
		width: 100%;
		padding: 0 48rpx;
		display: flex;
		align-items: center;
		position: fixed;
		left: 0;

		.input {
			flex: 1;
			height: 88rpx;
			border-radius: 44rpx;
			background-color: #f1f1f1f1;
			padding: 0 40rpx;
		}

		.send-btn {
			height: 68rpx;
			width: 104rpx;
			border-radius: 50rpx;
			background-color: #C9951C;
			margin-left: 32rpx;
			text-align: center;
			line-height: 68rpx;
			color: #ffffff;
			image {
				height: 100%;
				width: 100%;
			}
		}
	}
</style>
<style>
	view {
		box-sizing: border-box;
	}
</style>